<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    :onClose="closeDialog"
    width="80%"
    top="48px"
    :closeOnEscKeydown="false"
    :closeOnOverlayClick="false"
    :footer="edit"
  >
    <template #footer>
      <t-button :loading="btnLoading" theme="success" @click="onSubmit(0)">暂存</t-button>
      <!-- <t-tooltip content="提交后不可再编辑会进入审批流程"> -->
        <t-button :loading="btnLoading" :disabled="isCommit"  theme="primary" @click="onSubmit(1)">提交</t-button>
      <!-- </t-tooltip> -->
    </template>
    <t-loading :text="formLoadingText" size="medium" :loading="formLoading" showOverlay>
      <template #indicator>
        <t-icon v-if="formLoadingText === '数据读取中...'" name="loading" slot="icon"/>
        <t-icon v-else name="error-circle-filled" slot="icon"/>
      </template>
      <t-form
        labelAlign="left"
        labelWidth="225px"
        :data="formData"
        ref="form"
        :colon="true"
        :rules="edit ? rules : {}"
      >
        <t-row>
          <t-col :span="6">
            <t-form-item label="一、交通运输科研仪器设备数量" name="jtyskyyq">
              <t-input-adornment v-if="edit" append="台(套)">
                <t-input-number v-model="formData.jtyskyyq" theme="normal" placeholder="请输入交通运输科研仪器设备数量" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jtyskyyq}} 台（套）</span>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="其中：50 万元及以上的科研仪器设备" name="jtyskyyqwys" labelWidth="260px">
              <t-input-adornment v-if="edit" append="台(套)">
                <t-input-number v-model="formData.jtyskyyqwys" theme="normal" placeholder="请输入50万元及以上的科研仪器设备数量" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jtyskyyqwys}} 台（套）</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="6">
            <t-form-item label="当年新增科研仪器设备数量" name="jtyskyyqxz" labelWidth="195px">
              <t-input-adornment v-if="edit" append="台(套)">
                <t-input-number v-model="formData.jtyskyyqxz" theme="normal" placeholder="请输入当年新增科研仪器设备数量" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jtyskyyqxz}} 台（套）</span>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="其中：50 万元及以上的科研仪器设备" name="jtyskyyqxzwys" labelWidth="260px">
              <t-input-adornment v-if="edit" append="台(套)">
                <t-input-number v-model="formData.jtyskyyqxzwys" theme="normal" placeholder="请输入50 万元及以上的科研仪器设备数量" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jtyskyyqxzwys}} 台（套）</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-form-item label="二、交通运输科研实验室和研发中心总数量" name="jtyskysyshyfzx" labelWidth="295px">
            <t-input-adornment v-if="edit" append="个">
              <t-input-number v-model="formData.jtyskysyshyfzx" theme="normal" placeholder="请输入交通运输科研实验室和研发中心总数量" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jtyskysyshyfzx}} 个</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-col :span="6">
            <t-form-item label="机构内设交通运输科研实验室总数" name="jgnsjtyskysys" labelWidth="240px">
              <t-input-adornment v-if="edit" append="个">
                <t-input-number v-model="formData.jgnsjtyskysys" theme="normal" placeholder="请输入机构内设交通运输科研实验室总数" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jgnsjtyskysys}} 个</span>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="其中：国家重点（工程）实验室个数" name="jgnsjtyskysysgjzd" labelWidth="250px">
              <t-input-adornment v-if="edit" append="个">
                <t-input-number v-model="formData.jgnsjtyskysysgjzd" theme="normal" placeholder="请输入国家重点（工程）实验室个数" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jgnsjtyskysysgjzd}} 个</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="6">
            <t-form-item label="其中：行业（重点）实验室个数" name="jgnsjtyskysyshyzd" labelWidth="225px">
              <t-input-adornment v-if="edit" append="个">
                <t-input-number v-model="formData.jgnsjtyskysyshyzd" theme="normal" placeholder="请输入行业（重点）实验室个数" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jgnsjtyskysyshyzd}} 个</span>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="其中：省级重点（工程）实验室个数" name="jgnsjtyskysyssjzd" labelWidth="250px">
              <t-input-adornment v-if="edit" append="个">
                <t-input-number v-model="formData.jgnsjtyskysyssjzd" theme="normal" placeholder="请输入省级重点（工程）实验室个数" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jgnsjtyskysyssjzd}} 个</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="6">
            <t-form-item label="机构内设交通运输工程技术研发中心总数" name="jgnsjtysgcjsyfzx" labelWidth="280px">
              <t-input-adornment v-if="edit" append="个">
                <t-input-number v-model="formData.jgnsjtysgcjsyfzx" theme="normal" placeholder="请输入机构内设交通运输工程技术研发中心总数" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jgnsjtysgcjsyfzx}} 个</span>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="其中：国家工程（技术）研究中心个数" name="jgnsjtysgcjsyfzxgjgc" labelWidth="265px">
              <t-input-adornment v-if="edit" append="个">
                <t-input-number v-model="formData.jgnsjtysgcjsyfzxgjgc" theme="normal" placeholder="请输入国家工程（技术）研究中心个数" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jgnsjtysgcjsyfzxgjgc}} 个</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="6">
            <t-form-item label="其中：行业研发中心个数" name="jgnsjtysgcjsyfzxhyyf" labelWidth="180px">
              <t-input-adornment v-if="edit" append="个">
                <t-input-number v-model="formData.jgnsjtysgcjsyfzxhyyf" theme="normal" placeholder="请输入行业研发中心个数" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jgnsjtysgcjsyfzxhyyf}} 个</span>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="其中：省级工程（技术）研究中心个数" name="jgnsjtysgcjsyfzxsjgc" labelWidth="265px">
              <t-input-adornment v-if="edit" append="个">
                <t-input-number v-model="formData.jgnsjtysgcjsyfzxsjgc" theme="normal" placeholder="请输入省级工程（技术）研究中心个数" style="width: 120px"></t-input-number>
              </t-input-adornment>
              <span v-else>{{formData.jgnsjtysgcjsyfzxsjgc}} 个</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          三、本年新认证省部级及以上重点实验室、研发中心、野外科学观测研究基地情况
        </t-row>
        <t-card hover-shadow v-for="(base, index) in formData.researchConditionBase" :key="base.tid">
          <t-row>
            <t-col :span="3">
              <t-form-item label="序号" :name="`researchConditionBase[${index}].sort`" :label-width="50">
                <t-input-number v-if="edit" v-model="formData.researchConditionBase[index].sort"  placeholder="请输入序号" style="width: 160px" />
                <span v-else>{{formData.researchConditionBase[index].sort}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="5">
              <t-form-item label="基地名称" :name="`researchConditionBase[${index}].name`" :label-width="80">
                <t-input v-if="edit" v-model="formData.researchConditionBase[index].name" placeholder="请输入基地名称"></t-input>
                <span v-else>{{formData.researchConditionBase[index].name}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="2" :offset="1">
              <t-form-item label="认定时间" :name="`researchConditionBase[${index}].certificationDate`" :label-width="80">
                <t-date-picker v-if="edit" v-model="formData.researchConditionBase[index].certificationDate" placeholder="请输入认定时间" />
                <span v-else>{{formData.researchConditionBase[index].certificationDate}}</span>
              </t-form-item>
            </t-col>
          </t-row>
          <t-row>
            <t-col :span="8">
              <t-form-item label="认定级别和类型" :name="`researchConditionBase[${index}].certificationType`" :label-width="120">
                <t-input v-if="edit" v-model="formData.researchConditionBase[index].certificationType" placeholder="请输入认定级别和类型"></t-input>
                <span v-else>{{formData.researchConditionBase[index].certificationType}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="2" :offset="2" v-if="edit">
              <t-button variant="dashed" theme="danger" @click="delLine(index)">删除此行</t-button>
            </t-col>
          </t-row>
        </t-card>
        <t-card hover-shadow v-if="edit">
          <t-button variant="dashed" theme="primary" @click="addLine">
            <t-icon name="add" slot="icon" />
            添加一行
          </t-button>
        </t-card>
      </t-form>
    </t-loading>
  </t-dialog>
</template>

<script>
export default {
  name: 'TabResearchConditionsForm',
  props: {
    edit: { type: Boolean, default: true },
    infoId: { type: Number, default: -1 }
  },
  data() {
    return {
      visible: true,
      btnLoading: false,
      formLoading: true,
      formLoadingText: '数据读取中...',
      header: '',
      formData: {
        jtyskyyq: undefined,
        jtyskyyqwys: undefined,
        jtyskyyqxz: undefined,
        jtyskyyqxzwys: undefined,
        jtyskysyshyfzx: undefined,
        jgnsjtyskysys: undefined,
        jgnsjtyskysysgjzd: undefined,
        jgnsjtyskysyshyzd: undefined,
        jgnsjtyskysyssjzd: undefined,
        jgnsjtysgcjsyfzx: undefined,
        jgnsjtysgcjsyfzxgjgc: undefined,
        jgnsjtysgcjsyfzxhyyf: undefined,
        jgnsjtysgcjsyfzxsjgc: undefined,
        researchConditionBase: [],
        approveStatus: '1',
      },
      rules: {
        jtyskyyq: [{ required: true, message: '交通运输科研仪器设备数量不能为空' }],
        jtyskyyqwys: [{ required: true, message: '50 万元及以上的科研仪器设备不能为空' }],
        jtyskyyqxz: [{ required: true, message: '当年新增科研仪器设备数量不能为空' }],
        jtyskyyqxzwys: [{ required: true, message: '50 万元及以上的科研仪器设备不能为空' }],
        jtyskysyshyfzx: [{ required: true, message: '交通运输科研实验室和研发中心总数量不能为空' }],
        jgnsjtyskysys: [{ required: true, message: '机构内设交通运输科研实验室总数不能为空' }],
        jgnsjtyskysysgjzd: [{ required: true, message: '国家重点（工程）实验室个数不能为空' }],
        jgnsjtyskysyshyzd: [{ required: true, message: '行业（重点）实验室个数不能为空' }],
        jgnsjtyskysyssjzd: [{ required: true, message: '省级重点（工程）实验室个数不能为空' }],
        jgnsjtysgcjsyfzx: [{ required: true, message: '机构内设交通运输工程技术研发中心总数不能为空' }],
        jgnsjtysgcjsyfzxgjgc: [{ required: true, message: '国家工程（技术）研究中心个数不能为空' }],
        jgnsjtysgcjsyfzxhyyf: [{ required: true, message: '行业研发中心个数不能为空' }],
        jgnsjtysgcjsyfzxsjgc: [{ required: true, message: '省级工程（技术）研究中心个数不能为空' }],
        // list
        sort: [{ required: true, message: '序号不能为空' }],
        name: [{ required: true, message: '基地名称不能为空' }],
        certificationDate: [{ required: true, message: '认定时间不能为空' }],
        certificationType: [{ required: true, message: '认定级别和类型不能为空' }],
      },
    }
  },
  computed: {
    isCommit() {
      return this.formData.approveStatus !== '1'
    },
  },
  created() {
    if (this.edit) {
      if (this.infoId === -1) {
        this.header = '添加信息记录'
        this.formLoading = false
      } else {
        this.header = '修改信息内容'
        this.getDetail()
      }
    } else if (this.infoId === -1) {
      this.header = '信息错误！！！'
      this.formLoadingText = '信息错误，请联系管理员'
    } else {
      this.header = '查看信息内容'
      this.getDetail()
    }
  },
  methods: {
    // 查看和修改时获取详情
    getDetail() {
      this.$api.kjtjdc.table.researchCondition.getInfoById(this.infoId).then(({data}) => {
        this.formData = data;
        this.formLoading = false
      }).catch(e => {
        this.formLoadingText = e
        this.$message.error('数据获取失败，请稍后再试！')
      });
    },
    async onSubmit(isCommit) {
      this.btnLoading = true
      let validRes
      try {
        validRes = await this.$refs.form.validate()
      // eslint-disable-next-line no-empty
      } catch (e) {}
      if (validRes !== true) {
        this.$message.warning('请完善表单')
        this.btnLoading = false
        return
      }
      let action = 'edit'
      if (this.infoId === -1) {
        // 新增
        action = 'add'
      }
      if (isCommit) {
        // 提交
        this.formData.approveStatus = '2'
      } else {
        // 暂存
        this.formData.approveStatus = '1'
      }
      this.$api.kjtjdc.table.researchCondition[action](this.formData).then(() => {
        this.$message.success(`${isCommit?'提交':'暂存'}信息成功！`)
        this.btnLoading = false
        this.$emit('update:visible', false);
        this.$emit('reload');
      }).catch(e => {
        this.$message.error(e)
        this.btnLoading = false
      })
    },
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
    addLine() {
      const tid = Math.random().toString(32).substring(2, 7)
      this.formData.researchConditionBase.push({tid})
    },
    delLine(idx) {
      this.formData.researchConditionBase.splice(idx, 1)
    }
  }
};
</script>

<style lang="less" scoped>
.t-form {
  max-height: 70vh;
  overflow: auto;
  padding: 5px 10px 8px 0;
}
.t-form::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.t-form::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
.t-form__item {
  margin: 0 35px 0 0;
}
.t-row {
  margin-bottom: 20px;
}
.t-row:last-of-type {
  margin-bottom: 0;
}
.t-card {
  margin-bottom: 10px;
}
</style>
